<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2024-09-04 14:48:39
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-09-04 16:12:51
 * @FilePath: /things-admin/src/view/device/Edit/brainwave/Detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div id="echarts_one"></div>
    <div id="echarts_two"></div>
    <div id="echarts_three"></div>
    <el-button @click="returnPage" style="width: 100px;margin-left: calc(50% - 50px);">返回</el-button>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { brainwaveReport } from "@/base/api/Brainwave";
export default {
  data() {
    return {
      data_one_x: [],
      data_one_y: [],
      data_two_x: [],
      data_two_y: [],
      data_three_x: [],
      data_three_y: [],
    };
  },
  methods: {
    getData() {
      brainwaveReport(this.$route.query.id).then(res => {
        this.data_one_y = [];
        this.data_one_x = [];
        this.data_two_y = [];
        this.data_two_x = [];
        this.data_three_y = [];
        this.data_three_x = [];
        res.data.focusList.forEach(item => {
          this.data_one_y.push(item.val);
          this.data_one_x.push(item.time2);
        });
        res.data.relaxList.forEach(item=>{
            this.data_two_y.push(item.val);
            this.data_two_x.push(item.time2);
        })
        res.data.naoboList.forEach(item=>{
            this.data_three_y.push(item.val);
            this.data_three_x.push(item.time2);
        })
        // 平均线算法
        var sum = 0;
        for (var i = 0; i < this.data_one_y.length; i++) {
          sum += Number(this.data_one_y[i]);
        }
        var average = sum / this.data_one_y.length;

        // 平均线算法
        var sum1 = 0;
        for (var i = 0; i < this.data_two_y.length; i++) {
          sum1 += Number(this.data_two_y[i]);
        }
        var average_two = sum1 / this.data_two_y.length;

        var sum2 = 0;
        for (var i = 0; i < this.data_three_y.length; i++) {
          sum2 += Number(this.data_three_y[i]);
        }
        var average_three = sum2 / this.data_three_y.length;
        this.echartsOne(average);
        this.echartsTwo(average_two)
        this.echartsThree(average_three)
      });
    },
    echartsOne(average) {
      let myChartNineteen = echarts.init(
        document.getElementById("echarts_one")
      );
      let option = {
        xAxis: [
          {
            type: "category",
            name: "时间",
            data: this.data_one_x,
            splitLine: {
              show: false // 隐藏y轴分隔线
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 100 // 每隔多少个数据项显示一个标签，这里设置为 100，可根据实际情况调整
              //   formatter: function(value, index) {
              //     // 根据需要自定义标签显示格式，比如只显示特定位置的标签
              //     if (index % 100 === 0) {
              //       return value;
              //     } else {
              //       return "";
              //     }
              //   }
            },
            nameTextStyle: {
              color: "#60D4FF", // 设置x轴名称的颜色为#333
              fontSize: 16, // 设置x轴名称的字体大小为16
              fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
              align: "right",
              verticalAlign: "top"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "专注度",
            nameGap: 20,
            splitLine: {
              show: false // 隐藏y轴分隔线
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              //   interval: 0, // 强制显示所有标签
              textStyle: {
                // color: "#FFFFFF", // 设置x轴标签字体颜色
                fontSize: 20
              }
            },
            nameTextStyle: {
              color: "#60D4FF", // 设置x轴名称的颜色为#333
              fontSize: 16, // 设置x轴名称的字体大小为16
              fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
              align: "left",
              verticalAlign: "top"
            }
          }
        ],
        series: [
          {
            name: "专注度",
            type: "line",
            stack: "Total",
            symbol: "circle",
            data: this.data_one_y,
            showSymbol: false,
          },
          {
            type: "line",
            data: new Array(this.data_one_y.length).fill(average),
            showSymbol: false,
            lineStyle: {
              type: "dashed" // 可以设置为虚线以区分于原始数据系列
            },
            label: {
              show: false,
              position: "top"
              //   formatter: function() {
              //     return average.toFixed(2); // 显示平均值标签
              //   }
            }
          }
        ]
      };
      myChartNineteen.setOption(option);
    },
    echartsTwo(average) {
      let myChartTwo = echarts.init(
        document.getElementById("echarts_two")
      );
      let option = {
        xAxis: [
          {
            type: "category",
            name: "时间",
            data: this.data_two_x,
            splitLine: {
              show: false // 隐藏y轴分隔线
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 100 // 每隔多少个数据项显示一个标签，这里设置为 100，可根据实际情况调整
              //   formatter: function(value, index) {
              //     // 根据需要自定义标签显示格式，比如只显示特定位置的标签
              //     if (index % 100 === 0) {
              //       return value;
              //     } else {
              //       return "";
              //     }
              //   }
            },
            nameTextStyle: {
              color: "#60D4FF", // 设置x轴名称的颜色为#333
              fontSize: 16, // 设置x轴名称的字体大小为16
              fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
              align: "right",
              verticalAlign: "top"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "放松度",

            nameGap: 20,
            splitLine: {
              show: false // 隐藏y轴分隔线
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              //   interval: 0, // 强制显示所有标签
              textStyle: {
                // color: "#FFFFFF", // 设置x轴标签字体颜色
                fontSize: 20
              }
            },
            nameTextStyle: {
              color: "#60D4FF", // 设置x轴名称的颜色为#333
              fontSize: 16, // 设置x轴名称的字体大小为16
              fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
              align: "left",
              verticalAlign: "top"
            }
          }
        ],
        series: [
          {
            name: "放松度",
            type: "line",
            stack: "Total",
            symbol: "circle",
            data: this.data_two_y,
            showSymbol: false,
          },
          {
            type: "line",
            data: new Array(this.data_two_y.length).fill(average),
            showSymbol: false,
            lineStyle: {
              type: "dashed" // 可以设置为虚线以区分于原始数据系列
            },
            label: {
              show: false,
              position: "top"
              //   formatter: function() {
              //     return average.toFixed(2); // 显示平均值标签
              //   }
            }
          }
        ]
      };
      myChartTwo.setOption(option);
    },
    echartsThree(average) {
      let myChartThree = echarts.init(
        document.getElementById("echarts_three")
      );
      let option = {
        xAxis: [
          {
            type: "category",
            name: "时间",
            data: this.data_three_x,
            splitLine: {
              show: false // 隐藏y轴分隔线
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 100 // 每隔多少个数据项显示一个标签，这里设置为 100，可根据实际情况调整
              //   formatter: function(value, index) {
              //     // 根据需要自定义标签显示格式，比如只显示特定位置的标签
              //     if (index % 100 === 0) {
              //       return value;
              //     } else {
              //       return "";
              //     }
              //   }
            },
            nameTextStyle: {
              color: "#60D4FF", // 设置x轴名称的颜色为#333
              fontSize: 16, // 设置x轴名称的字体大小为16
              fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
              align: "right",
              verticalAlign: "top"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "脑波",

            nameGap: 20,
            splitLine: {
              show: false // 隐藏y轴分隔线
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              //   interval: 0, // 强制显示所有标签
              textStyle: {
                // color: "#FFFFFF", // 设置x轴标签字体颜色
                fontSize: 20
              }
            },
            nameTextStyle: {
              color: "#60D4FF", // 设置x轴名称的颜色为#333
              fontSize: 16, // 设置x轴名称的字体大小为16
              fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
              align: "left",
              verticalAlign: "top"
            }
          }
        ],
        series: [
          {
            name: "脑波",
            type: "line",
            stack: "Total",
            symbol: "circle",
            data: this.data_three_y,
            showSymbol: false,
          },
          {
            type: "line",
            data: new Array(this.data_three_y.length).fill(average),
            showSymbol: false,
            lineStyle: {
              type: "dashed" // 可以设置为虚线以区分于原始数据系列
            },
            label: {
              show: false,
              position: "top"
              //   formatter: function() {
              //     return average.toFixed(2); // 显示平均值标签
              //   }
            }
          }
        ]
      };
      myChartThree.setOption(option);
    },
    //返回上一页
    returnPage() {
        history.back()
    }
  },
  mounted() {
    this.getData();
    // this.echartsOne()
  }
};
</script>

<style lang="less" scoped>
#echarts_one {
  width: 90%;
  height: 400px;
  //   background-color: blue;
  margin: 3% 5%;
}
#echarts_two {
  width: 90%;
  height: 400px;
  //   background-color: blue;
  margin: 3% 5%;
}
#echarts_three {
  width: 90%;
  height: 400px;
  //   background-color: blue;
  margin: 3% 5%;
}
</style>
